<template>
    <div>
        <!-- 顶部bar -->
        <!-- <header class="home-header wrap" :class="{ 'active': state.headerScroll }">
            <router-link tag="i" to="./category"><i class="iconfont icon-menu"></i></router-link>
            <div class="header-search">
                <span class="app-name">顶尖商城</span>
                <i class="iconfont icon-search"></i>
                <router-link tag="span" class="search-title" to="./product-list?from=home">山河无恙，人间皆安</router-link>
            </div>
            <router-link class="login" tag="span" to="./login" v-if="!state.isLogin">登录</router-link>
            <router-link class="login" tag="span" to="./user" v-else>
                <van-icon name="manager-o" />
            </router-link>
        </header> -->
        <div class="header">
            <Header></Header>

            <!-- 轮播图 -->
            <div class="carousel">
                <!-- <span class="demonstration">Motion blur the switch (default)</span> -->
                <el-carousel height="450px" motion-blur>
                    <el-carousel-item v-for="item in carouselList">
                        <router-link :to="item.Advert_url">
                            <img :src="item.Advert_image" alt="">
                        </router-link>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>

        <div class="body">
            <!-- 新品上市 -->
            <div class="good">
                <div class="good-header">
                    <div>新品上市</div><el-link :underline="false">查看更多</el-link>
                </div>
                <div class="card">
                    <el-card v-for="good in goodList" @click="toDetail(good.Good_id)" shadow="hover">

                        <img :src="good.Good_image"
                            style="width: 100%" />
                        <h3 class="title">{{ good.Good_brand }} {{ good.Good_name }}</h3>
                        <p class="desc">{{ good.Good_desc }}</p>
                        <p class="price"><span class="num">{{ good.Good_discountPrice }}</span>元<span>起</span><del><span
                                    class="num">{{ good.Good_price }}</span>元</del>
                        </p>
                        <!-- <template #footer>Yummy hamburger</template> -->
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { nextTick, onMounted, reactive, ref } from 'vue';
import Header from '../components/Header.vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();
const state = reactive({
    headerScroll: false,// 滚动透明判断
})
const goodList = ref()
const carouselList = ref()
const getGoodList = ()=>{
  axios({
    url: "http://124.71.66.63:9090/good/getGoodList",
    method: 'GET'
  }).then(res=>{
    console.log('getGoodList:',res);
    if (res.data.isSuccess == true) {
      goodList.value = res.data.data;
    }
    else {
      ElMessage({
        message: res.data.errorMsg,
        type: 'error',
      })
    }
  })
}
const getCarouselList = ()=>{
    axios({
        url: 'http://124.71.66.63:9090/advert/advertList',
        method: 'GET'
    }).then(res=>{
        if (res.data.isSuccess == true) {
            carouselList.value = res.data.data;
        }
    })
}
const toDetail = id=>{
    router.push("/good/"+id);
}

onMounted(() => {
    getGoodList();
    getCarouselList();
})
nextTick(() => {
    document.body.addEventListener('scroll', () => {
        let scrollTop = window.pageYOffset || document.document.documentElement.scrollTop || document.body.scrollTop;
        scrollTop > 100 ? state.headerScroll = true : state.headerScroll = false;

    })
})
</script>

<style lang="less" scoped>


// header
.header {
    width: 100%;
}

/**
Nav
*/



/**
Carousel 走马灯
*/
.carousel {
    width: 1200px;
    margin: 0 auto 20px auto;


}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}


// Body
.body {
    width: 100%;
    background-color: #f5f5f5;
}

/** 
Good
*/
.good {
    width: 1200px;
    margin: auto;
    background-color: #f5f5f5;

    .good-header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 22px;

        .el-link {
            font-size: 16px;
        }
    }

    .card {
        overflow: hidden; // 消除浮动的影响 解决父类高度塌陷
        .el-card {
            margin: 5px;
            float: left;
            width: 288px;
            height: 370px;
            text-align: center;
            
            .title {
                font-size: 14px;
                color: #333333;
            }

            .desc {
                font-size: 12px;
                color: #B0B0B0;
                margin: 4px 0 6px 0;
                height: 16px;
                line-height: 16px;
                overflow: hidden;
            }

            .price {
                color: #FF6700;

                .num {
                    font-size: 14px;
                }

                del {
                    color: #B0B0B0;
                    font-size: 14px;
                    margin: 0 0 0 6px;
                }
            }
        }
    }

}
</style>